<template>
  <div>
    <div class="cut-con">
      <div class="cut-con-left">
        <VueCropper
          ref="cropper"
          :img="option.img"
          :fixedNumber="option.fixedNumber"
          :autoCrop="option.autoCrop"
          :size="option.size"
          :full="option.full"
          :outputType="option.outputType"
          :canMove="option.canMove"
          :fixedBox="option.fixedBox"
          :original="option.original"
          :canMoveBox="option.canMoveBox"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :centerBox="option.centerBox"
          :high="option.high"
          :fixed="option.fixed"
        ></VueCropper>
      </div>
      <div class="cut-con-right">
        <el-radio-group v-model="cut_type" class="cut-con-right-bili">
          <el-radio label="自由比例"></el-radio>
          <el-radio label="1:1"></el-radio>
          <el-radio label="4:3"></el-radio>
          <el-radio label="5:4"></el-radio>
        </el-radio-group>
        <div class="cut-con-right-num">
          <p>预览图</p>
          <div class="preImg">
            <img :src="preImg" alt="">
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="lookImg">预览</el-button>
      <el-button @click="closeModel">取 消</el-button>
      <el-button type="primary" @click="upCutImg('blob')">确 定</el-button>
    </span>
  </div>
</template>
<script>
import { VueCropper } from "vue-cropper";
import { mapGetters } from "vuex";
import { base64_Upfile } from "@/api/common";
import { setTimeout } from 'timers';
export default {
  props: ["cutImg", "actIdx"],
  comments: {
    VueCropper
  },
  computed: {
    ...mapGetters(["token"])
  },
  data() {
    return {
      cropper: {},
      image: {},
      showCut: false,
      cut_type: "自由比例",
      height: 0,
      width: 0,
      libi: [16, 9],
      option: {
        img: this.cutImg,
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        fixedNumber: this.libi,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 200,
        autoCropHeight: 150,
        centerBox: false,
        high: true,
        fixed: false
      },
      preImg: "",
      show: true
    };
  },
  watch: {
    cut_type: function(val) {
      if (val === "自由比例") {
        this.option.fixed = false;
        return "";
      } else {
        this.option.fixed = true;
      }
      switch (val) {
        case "1:1":
          this.option.fixedNumber = [1, 1];
          this.option.autoCropWidth = 200;
          this.option.autoCropHeight = 200;
          break;
        case "4:3":
          this.option.fixedNumber = [4, 3];
          this.option.autoCropWidth = 200;
          this.option.autoCropHeight = 150;
          console.log(this.option.fixedNumber);
          break;
        case "5:4":
          this.option.fixedNumber = [5, 4];
          this.option.autoCropWidth = 250;
          this.option.autoCropHeight = 200;
          break;
        default:
          break;
      }
      // this.$refs.cropper.createCrop(window);
    }
  },
  created() {
    this.option.img = this.cutImg;
    this.preImg = this.cutImg;
  },
  mounted() {
    this.image = this.$refs.image;
    // 初始化裁剪
    setTimeout(() => {
      this.$refs.cropper.clearCrop();
      this.$refs.cropper.startCrop();
      console.log(this.option.img);
    });
  },
  methods: {
    // 裁剪图片
    cutFile(url) {},
    // 预览截图
    lookImg() {
      this.$refs.cropper.getCropData(data => {
        // do something
        this.preImg = data;
      });
    },
    closeModel() {
      this.$emit("closeModel");
      this.$refs.cropper.clearCrop();
    },
    // 上传图片
    upCutImg() {
      const that = this;
      this.$refs.cropper.getCropData(data => {
        const obj = {
          image: data,
          type: "1",
          file_group: that.actIdx
        };
        base64_Upfile(obj).then(res => {
          if (res.code === 200) {
            this.$refs.cropper.clearCrop();
            that.$message({
              message: res.msg,
              type: "success"
            });
            setTimeout(function() {
              that.closeModel();
            }, 800);
          } else {
            that.$message({
              message: res.msg,
              type: "error"
            });
          }
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.cut-con {
  width: 100%;
  height: 400px;
  margin-top: -20px;
  margin-bottom: -20px;
  display: flex;
  position: relative;
  margin: 0 auto;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  .cut-con-left {
    position: relative;
    width: 500px;
    height: 396px;
    margin: auto 0;
    border: 1px solid rgba(223, 223, 223, 1);
    img {
      width: 100%;
    }
  }
  .cut-con-right {
    width: 43%;
    padding-top: 24px;
    margin-left: 20px;
    align-items: center;
    display: flex;
    flex-direction: column;
    input {
      width: 60px;
      height: 26px;
      border-radius: 3px;
      border: 1px solid rgba(162, 162, 162, 1);
    }
    .cut-con-right-bili {
      label {
        font-size: 16px;
      }
      width: 100%;
      height: auto;
      padding: 20px;
      border: 1px solid #dfdfdf;
      font-size: 14px;
    }
    .cut-con-right-num {
      .preImg {
        padding: 20px;
      }
      label {
        font-weight: 500;
      }
      width: 100%;
      height: 78%;
      border: 1px solid #dfdfdf;
      font-size: 14px;
      border-top: none;
      p {
        font-size: 14px;
        color: #353535;
        padding-left: 20px;
      }
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}
.dialog-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10px;
}
</style>
